<template>
  <div > 
      <!--创建dome容器-->
      <div id="mapDiv" style="position:absolute;width:100%; height:100%;z-index:1"></div>
      <div  style="position:absolute;z-index:2;float:left" class="b" >
        <a-button @click="$router.back(-1)" style="margin-right: 8px"  type="primary">
          <a-icon type="double-left" />
          关闭</a-button>
        <br /><br />
          <a-dropdown>
              <a class="ant-dropdown-link" @click="e => e.preventDefault()" type="button">             
                <!--操作<a-icon type="down" />-->
                <img  src=""/>
              </a>
              <a-menu slot="overlay">
                <a-menu-item>
                  <a  v-on:click="openDian();">绘制点</a>
                </a-menu-item>
                <a-menu-item>
                  <a  v-on:click="openXian();" >绘制线</a>
                </a-menu-item>
                <a-menu-item>
                  <a  v-on:click="openJuxing();">绘制矩形</a>
                </a-menu-item>
                <a-menu-item>
                  <a  v-on:click="openMian();">绘制多边形</a>
                </a-menu-item>
                <a-menu-item>
                  <a  v-on:click="openYuan();">绘制圆形</a>
                </a-menu-item>
                <a-menu-item>
                  <a v-on:click="ceLong();">测距</a>
                </a-menu-item>
                <a-menu-item>
                  <a  v-on:click="ceArea();">测面</a>
                </a-menu-item> 
                <a-menu-item>
                  <a  v-on:click="clear();">清空</a>
                </a-menu-item>
              </a-menu>
          </a-dropdown>
          <br /><br /><br /><br /> 
          <div :style="{color:'#FFFFFF'}">
              <a-card
                title="地块管理信息"
                style="width:100%,font-size:30px;color:white"
                :tab-list="tabListNoTitle"
                :active-tab-key="noTitleKey"
                @tabChange="key => onTabChange(key, 'noTitleKey')"
                :style="{'background':backgroundColor,'opacity':opacity,'color':color}"
                :headStyle="{color:'#FFFFFF'}"
                :bordered=false
              >
                <p v-if="noTitleKey === '区域模式'" :style="{color:'#FFFFFF'}">
                  <ul>地块名称:&nbsp;&nbsp;&nbsp;{{landname}}</ul>
                  <ul>地块联系人:&nbsp;&nbsp;&nbsp;{{ren}}</ul>
                  <ul>联系方式:&nbsp;&nbsp;&nbsp;{{tel}}</ul>
                  <ul>地块面积(m²):&nbsp;&nbsp;&nbsp;{{area}}</ul>
                  <ul>创建日期:&nbsp;&nbsp;&nbsp;{{createtime}}</ul>                
                </p>
                <p v-else-if="noTitleKey === '航线模式'" :style="{color:'#FFFFFF'}">
                  <a-button style="margin-left: 124px" @click="onclick" type="primary">查看航线</a-button>
                </p>
               
              </a-card>
          </div> 
      </div>  
  </div>
  
</template>

<script>
  import { httpAction, getAction } from '@/api/manage'

  export default {
    data() {
      //这里存放数据
      return {
        tabListNoTitle: [
          {
            key: '区域模式',
            tab: '区域模式',
          },
          {
            key: '航线模式',
            tab: '航线模式',
          },
         
        ],
        // key: 'tab1',
        noTitleKey: '区域模式',
        backgroundColor: '#191919',
        opacity: '0.8',
        color: '#FFFFFF',
        points: '',
        landname: '',
        area: '',
        ren: '',
        tel: '',
        createtime: '',
          // cityName:"" , //暂存城市名称
        url: {
          list0: "/fly/axhkLandManagement/getAllMassifname",
          list1: "/fly/axhkWorkManagement/getLatitude",         
        },
      };
    },
    created() {      
    },
     //生命周期 - 在挂载完成（可以访问DOM元素）
    mounted() {
      this.onLoad()
    },
    methods: {
      onLoad(){
        let that=this  //将方法放在mounted，会有指向问题，定义this使用就会正常
        that.huatu(); 
       
        let zoom = 12; //地图的初始化级别，及放大比例
        that.map = new T.Map("mapDiv");  //初始化地图对象 
        that.map.centerAndZoom(new T.LngLat(109.063332, 34.270990), zoom); //地图的初始化中心点，此为西安的经纬度
       
        //定义一个图层类型的控件
        var ctrl = new T.Control.MapType();
        //添加图层控件
        that.map.addControl(ctrl); 
        // 设置地图位地星混合图层
        that.map.setMapType(window.TMAP_HYBRID_MAP);
        //允许鼠标滚轮缩放地图
        that.map.enableScrollWheelZoom();
        //创建比例尺控件对象
        var scale = new T.Control.Scale();
        //添加比例尺控件
        that.map.addControl(scale);
        //定义一个鹰眼控件
        var miniMap = new T.Control.OverviewMap({
            isOpen: true,
            size: new T.Point(150, 150)
        });
        //添加鹰眼控件
        that.map.addControl(miniMap);
        // //定义一个标绘控件
        // var military = new T.Control.militarySymbols({ position: T_ANCHOR_TOP_LEFT});
        // //向地图上增加标绘控件
        // that.map.addControl(military);        
         
      },

      openDian(){  
        //创建标注点的工具对象
       let markerTool = new T.MarkTool(this.map, {follow: true});
        markerTool.open()
      },
      openXian(){
         var config = {
            showLabel: true
        };
         //创建测量长度的工具对象
        let lineTool = new T.PolylineTool(this.map, config); 
        lineTool.open();
      },
      openMian(){
        var config = {
            showLabel: true,
            color: "blue", weight: 3, opacity: 0.5, fillColor: "#FFFFFF", fillOpacity: 0.5
        };
        //创建测量面积的工具对象
        let polygonTool = new T.PolygonTool(this.map, config);
        polygonTool.open()

      },
      openJuxing(){
        let  rectTool = new T.RectangleTool(this.map);
        rectTool.open();
      },
      openYuan(){
        let circleTool = new T.CircleTool(this.map,{ color: "blue", weight: 3, opacity: 0.5, fillColor: "#FFFFFF", fillOpacity: 0.5});
        circleTool.open();
      },
      ceLong(){
        var config = {
            showLabel: true
        };
         //创建测量长度的工具对象
        let lineTool = new T.PolylineTool(this.map, config); 
        lineTool.open();
      },
      ceArea(){
        var config = {
            showLabel: true,
            color: "blue", weight: 3, opacity: 0.5, fillColor: "#FFFFFF", fillOpacity: 0.5
        };
        //创建测量面积的工具对象
        let polygonTool = new T.PolygonTool(this.map, config);
        polygonTool.open()
      },
      clear(){
       this.map.clearOverLays()
      },
      huatu(){ 
        let name=this.$route.query.landName 
        // alert(JSON.stringify(this.tabListNoTitle))
         getAction(this.url.list0,{massifname:name}).then((res)=>{
            if(res.success){
              this.landname=res.result[0].massif_name
              this.ren=res.result[0].massif_master_name
              this.tel=res.result[0].massif_master_telephone
              this.area=res.result[0].land_area
              this.createtime=res.result[0].create_time
              // alert(this.landname)
              
            } 
          }); 
        
         getAction(this.url.list1,{massifname:name}).then((res)=>{
          if(res.success){
            //  this.points =res.result; 
            this.$set(this,'points',res.result)
            // alert(JSON.stringify(this.points[0][0].lat)); 
              // alert(JSON.stringify(this.points))
           //path : 多坐标点数组 ，格式：[{lng:'',lat:''},{lng:'',lat:''},{lng:'',lat:''}]
           //{x代表lng:'经度',  y代表lat:'纬度'}
           //把多边形的中心点设置成地图的中心点，开始吧
            var path =this.points[0]
            var x = 0.0;
        　　var y = 0.0;
        　　for (var i = 0; i < path.length; i++) {
        　　　　x = x + parseFloat(path[i].lng);
        　　　　y = y + parseFloat(path[i].lat);
        　　}
        　　x = x / path.length;
        　　y = y / path.length;
            // alert(x)
            // alert(y)
            // let zoom =14;
            //动态获取中心点坐标
            this.map.centerAndZoom(new T.LngLat(x,y));
            // this.map.centerAndZoom(new T.LngLat(this.points[0][0].lng, this.points[0][0].lat),zoom);
            //动态获取缩放比例，根据提供的坐标点数组设置地图视野，调整后的视野会保证包含提供的坐标点。
            this.map.setViewport(path);  

             //创建面对象
                    let polygon = new T.Polygon(this.points, {
                          color: "blue",
                          weight: 3,
                          opacity: 0.5,
                          fillColor: "#FFFFFF",
                          // fillColor: "#191919",
                          fillOpacity: 0.5
                      }); 
                      // this.map.getViewport(polygon) 
                  //向地图上添加面
                  this.map.addOverLay(polygon);      
            }
          }); 
      },
      onclick(){
         this.map.clearOverLays()
          //创建线对象
          var line = new T.Polyline(this.points,{color: "blue",});
          //向地图上添加线
          this.map.addOverLay(line);
          for (var i = 0; i < this.points.length; i++) {
            for(var j=0;j<this.points[i].length;j++){
                　var n = this.points[i][j].lng;
        　　　　  var m = this.points[i][j].lat;
                  //  alert(m)
                    //创建标注对象
                      // var marker = new T.Marker(new T.LngLat(this.points[i].lng,this.points[i].lat));
                      var marker = new T.Marker(new T.LngLat(n,m));
                      //向地图上添加标注
                      this.map.addOverLay(marker);
                      //信息窗口的内容
                      var content =JSON.stringify(j+1)
                      //文字标签
                      var   label = new T.Label({
                          // text: "<b>文字标注!!!<b>",
                          text: "<b>marker  <b>"+content,
                          // text: content,
                          position: marker.getLngLat(),
                          offset: new T.Point(3, -30)
                      });
                      this.map.addOverLay(label);
                      marker.addEventListener("drag", function (e) {
                          label.setLngLat(marker.getLngLat());
                      })                       
              }
        　　　
        　　}
           
      },
      onTabChange(key, type) {
        console.log(key, type);
        this[type] = key;
      },
    }
  }

</script>
